<template>
  <div class="main">
    <div class="main_top">
      <img width="100%" height="100%" src="../assets/images/1111.jpg" alt />
    </div>
    <div class="form">
      <div class="tit">注册</div>
      <div class="user_pwd">
        <li class="classroom" @click="btn">{{nj}}</li>
        <li class="classroom" @click="btn_room">{{room}}</li>
        <li class="classroom" style="margin-top:1rem" @click="btn_sex">{{sex}}</li>
        <input class="pwd1" placeholder="姓名" type="text" v-model="name" />
        <input class="pwd" placeholder="手机号" type="text" v-model="tel" />
        <input class="pwd" placeholder="学号" type="text" v-model="sfzhm" />
        <input class="pwd" placeholder="登录密码" type="password" v-model="pwd" />
      </div>
      <div class="footer">
        <mt-button class="btn" @click="register" type="danger">注册</mt-button>
      </div>
      <div class="bott">
        <span class="bot_rig" @click="login">登录</span>
      </div>
    </div>
    <mt-popup v-model="popupVisible" position="bottom" class="popup">
      <div class="btn">
        <span class="bnn_left" @click="qx">取消</span>
        <span class="btn_rig" @click="qd">确定</span>
      </div>
      <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </mt-popup>
    <mt-popup v-model="popupVisible1" position="bottom" class="popup">
      <div class="btn">
        <span class="bnn_left" @click="qx1">取消</span>
        <span class="btn_rig" @click="qd1">确定</span>
      </div>
      <mt-picker
        style="text-align: center;"
        :slots="lists"
        ref="lists"
        @change="onValuesChange1"
        value-key="ClassName"
      ></mt-picker>
    </mt-popup>
    <mt-popup v-model="popupVisible2" position="bottom" class="popup">
      <div class="btn">
        <span class="bnn_left" @click="qx2">取消</span>
        <span class="btn_rig" @click="qd2">确定</span>
      </div>
      <mt-picker
        style="text-align: center;"
        :slots="slots2"
        ref="lists"
        @change="onValuesChange2"
        value-key="sex"
      ></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import https from "../utils/http.js";
import CryptoJS from "crypto-js";
export default {
  props: {},
  data() {
    return {
      token: "",
      popupVisible: false,
      popupVisible1: false,
      popupVisible2: false,
      changeRegion: "",
      values: "",
      values1: "",
      values2: "",
      nj: "年级",
      room: "班级",
      roomid: "",
      sexid: "",
      tel: "",
      pwd: "",
      sfzhm: "",
      name: "",
      sex: "性别",
      slots: [
        {
          flex: 1,
          values: ["请选择年级", "高一", "高二", "高三"],
          className: "slot1",
          textAlign: "right"
        }
      ],
      slots2: [
        {
          flex: 1,
          values: [
            { id: 1, sex: "男" },
            { id: 2, sex: "女" }
          ],
          className: "slot1",
          textAlign: "right"
        }
      ],
      list: [],
      slots1: [
        {
          flex: 1,
          values: [
            "2015-01",
            "2015-02",
            "2015-03",
            "2015-04",
            "2015-05",
            "2015-06"
          ],
          className: "slot1",
          textAlign: "right"
        }
      ]
    };
  },
  computed: {
    lists() {
      let lists = [
        {
          flex: 1,
          values: this.list,
          className: "slot1",
          textAlign: "right"
        }
      ];
      return lists;
    }
  },
  created() {
    // this.token = localStorage.getItem("token");
  },
  mounted() {},
  watch: {},
  methods: {
    get_room(id) {
      console.log(id);
      https({
        method: "GET",
        url: "/api/v1/Commons/ClassGetListByGrade/" + id
      })
        .then(res => {
          console.log(res);
          if (res.Code == 200) {
            console.log(res.Data);
            this.list = res.Data;
            //   this.allLoaded = false;
            //   this.PageIndex = res.ResultData.PageIndex;
            //   this.PageTotal = res.ResultData.PageTotal;
            //   this.PageIndex = 2;
            //   this.$refs.loadmore.onTopLoaded();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    btn() {
      this.popupVisible = true;
    },
    btn_room() {
      let id = 0;
      if (this.values == "高一") {
        this.popupVisible1 = true;
        id = 1;
        this.get_room(id);
      } else if (this.values == "高二") {
        id = 2;
        this.popupVisible1 = true;
        this.get_room(id);
      } else if (this.values == "高三") {
        id = 3;
        this.popupVisible1 = true;
        this.get_room(id);
      } else if (this.values == "请选择年级") {
        Toast("请先选择年级");
        this.popupVisible1 = false;
      }
    },
    btn_sex() {
      this.popupVisible2 = true;
    },
    onValuesChange(picker, values) {
      console.log(values);
      this.values = values[0];
      console.log(this.values);
    },
    onValuesChange1(picker, values) {
      if (values[0]) {
        this.values1 = values[0].ClassName;
        this.roomid = values[0].ClassID;
      }
    },
    onValuesChange2(picker, values) {
      console.log(values);
      if (values[0]) {
        this.values2 = values[0].sex;
        this.sexid = values[0].id;
      }
    },
    qx() {
      this.popupVisible = false;
    },
    qd() {
      this.nj = this.values;
      this.popupVisible = false;
    },
    qx1() {
      this.popupVisible1 = false;
    },
    qd1() {
      this.room = this.values1;
      this.popupVisible1 = false;
    },
    qx2() {
      this.popupVisible2 = false;
    },
    qd2() {
      this.sex = this.values2;
      this.popupVisible2 = false;
    },
    register() {
      var strCiphertext = "";
      var key = CryptoJS.enc.Utf8.parse("26567E43738a8F91)E4E34e8D6E1E28A");
      var iv = CryptoJS.enc.Utf8.parse("3d03AD3F-2Ac26A2");
      var encrypted = CryptoJS.AES.encrypt(this.pwd, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
      strCiphertext = encrypted.ciphertext.toString(); //密文
      https({
        method: "post",
        url: "/api/v1/Systems/Register",
        data: {
          ClassID: this.roomid,
          Name: this.name,
          Idcard: this.sfzhm,
          Sex: Number(this.sexid),
          Mobile: this.tel,
          LoginPWD: strCiphertext
        }
      })
        .then(res => {
          console.log(res);
          if (res.Code == 200) {
            Toast({
              message: "注册成功",
              iconClass: "icon icon-success"
            });
            https({
              method: "post",
              url: "/api/v1/Systems/Login",
              data: {
                LoginCode: this.tel,
                Computer: "123",
                Browser: "123",
                LoginPWD: strCiphertext
              }
            })
              .then(res => {
                if (res.Code == 200) {
                  localStorage.setItem("token", res.Data.Token);
                  this.$router.push("/index");
                } else {
                  Toast({
                    message: res.Describe
                  });
                }
              })
              .catch(err => {
                console.log(err);
              });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    login() {
      this.$router.push("/login");
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  background: #fff;

  //   position: relative;

  img {
    width: 100%;
    height: calc(100% -100px);
  }
  .zhe {
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    top: 0;
    opacity: 0.4;
  }
  .main_top {
    position: absolute;
    top: 0;
    width: 100%;
    height: 500px;
    // background: #ff4d4f;
    overflow: hidden;
    // box-shadow: 3px 3px 10px #ff4d4f;
    opacity: 0.8;
  }
  .form {
    width: 80%;
    // height: 80%;
    padding-bottom: 2rem;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20px;
    border: 2px solid #eee;
    position: absolute;

    top: 10%;
    left: 10%;
    box-shadow: 3px 3px 10px #eee;
    .tit {
      width: 100%;
      height: 32px;
      line-height: 32px;
      font-size: 1.5rem;
      font-weight: 600;
      margin-top: 10%;
      padding-left: 10%;
      box-sizing: border-box;
    }
    .user_pwd {
      width: 100%;
      box-sizing: border-box;
      padding-top: 2rem;
      .classroom {
        list-style: none;
        width: 38.75%;
        float: left;
        height: 2.5rem;
        line-height: 2.5rem;
        border-radius: 5px;
        margin-left: 7.5%;
        background: #f1f1f1;
        text-indent: 1.5em;
        box-sizing: border-box;
        color: #888;
        font-size: 0.8rem;
      }
      .user {
        width: 85%;
        height: 2.5rem;
        border-radius: 5px;
        margin-left: 7.5%;
        background: #f1f1f1;
        text-indent: 1em;
        box-sizing: border-box;
        font-size: 0.8rem;
      }
      .pwd {
        width: 85%;
        height: 2.5rem;
        border-radius: 5px;
        margin-left: 7.5%;
        background: #f1f1f1;
        margin-top: 1rem;
        text-indent: 1em;
        box-sizing: border-box;
        font-size: 0.8rem;
      }
      .pwd1 {
        width: 38.75%;
        height: 2.5rem;
        border-radius: 5px;
        margin-left: 7.5%;
        background: #f1f1f1;
        margin-top: 1rem;
        text-indent: 1em;
        box-sizing: border-box;
        font-size: 0.8rem;
      }
    }
    .footer {
      width: 100%;
      padding-top: 2rem;
      box-sizing: border-box;
      .btn {
        width: 85%;
        margin-left: 7.5%;
        background: #ff4d4f;
      }
    }
    .bott {
      width: 85%;
      margin-left: 7.5%;
      height: 50px;
      font-size: 0.8rem;
      color: #666;
      padding-top: 1rem;
      box-sizing: border-box;
      .bot_left {
        float: left;
      }
      .bot_rig {
        float: right;
      }
    }
  }
  //   .footer {
  //     width: 100%;
  //     text-align: center;
  //     .btn {
  //       width: 80%;
  //       margin: 0 auto;
  //       border-radius: 40px;
  //     }
  //   }
  .popup {
    width: 100%;
    background: #fff;
    .btn {
      width: 90%;
      height: 32px;
      line-height: 32px;
      padding-top: 1rem;
      margin: 0 auto;
      .btn_left {
        float: left;
      }
      .btn_rig {
        float: right;
      }
    }
  }
}
</style>
